<template>
  <div class="about">
    <header>
      <p><i class="el-icon-s-fold"></i></p>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/about">团长</a></el-breadcrumb-item>
        <el-breadcrumb-item>团</el-breadcrumb-item>
      </el-breadcrumb>
    </header>
    <main>
      <div class="top">
        <div class="content">
          <div class="content_top">
            <h3>经营概况</h3>
            <span>实时</span>
            <span>昨日</span>
            <span>近7天</span>
            <span>近30天</span>
          </div>
          <p>更新时间2021年9月17日10:33:56</p>
        </div>
        <div class="bort">
          <dl>
            <dd>今日订单量</dd>
            <dt>0</dt>
          </dl>
          <dl>
            <dd>今日订单量</dd>
            <dt>￥0</dt>
          </dl>
          <dl>
            <dd>今日订单量</dd>
            <dt>0</dt>
          </dl>
          <dl>
            <dd>今日订单量</dd>
            <dt>￥ 0</dt>
          </dl>
        </div>
      </div>
      <div class="conter">
        <div class="butew">
          <p>待处理事项</p>
          <div class="bors">
            <dl>
              <dd>代发货</dd>
              <dt>1</dt>
            </dl>
            <dl>
              <dd>退款中</dd>
              <dt>0</dt>
            </dl>
            <dl>
              <dd>库存预警</dd>
              <dt>1</dt>
            </dl>
          </div>
        </div>
        <div class="butes">
          <p>常用功能</p>
          <div class="bors">
            <dl>
              <dt>
                <i class="el-icon-circle-check"></i>
              </dt>
              <dd>发布商品</dd>
            </dl>
            <dl>
              <dt><i class="el-icon-circle-check"></i></dt>
              <dd>订单管理</dd>
            </dl>
            <dl>
              <dt><i class="el-icon-circle-check"></i></dt>
              <dd>打单发货</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="butt">
        <div id="main"></div>
        <el-button>按时</el-button>
        <el-button type="primary">按天</el-button>
      </div>
    </main>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["成交额", "访客", "访问量"],
      },

      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "2021-03-03",
          "2021-03-04",
          "2021-03-05",
          "2021-03-06",
          "2021-03-07",
          "2021-03-008",
          "2021-03-09",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "成交额",
          type: "line",
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "访客",
          type: "line",
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "访问量",
          type: "line",
          stack: "总量",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

<style scoped lang="scss">
.about {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #efefef;
  header {
    width: 100%;
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 10px;
  }
  main {
    flex: 1;
  }
}
.top {
  width: 100%;
  height: 150px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: #fff;
}
.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  align-items: center;
}
.content_top {
  display: flex;
  span {
    padding: 0 20px;
  }
}
.bort {
  width: 100%;
  display: flex;
  dl {
    width: 25%;
    text-align: center;
    padding: 10px 0;
    dd {
      padding: 20px 0;
    }
    dt {
      font-weight: bolder;
      font-size: 20px;
    }
  }
}
.conter {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
.butew,
.butes {
  width: 49%;
  height: 150px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: #fff;
  p {
    padding: 10px 20px;
    font-weight: bolder;
  }
  .bors {
    width: 100%;
    display: flex;
    justify-content: space-around;
    dl {
      text-align: center;
      dd {
        padding: 20px 0;
      }
      dt {
        font-weight: bolder;
        font-size: 20px;
        i {
          padding: 5px 0;
          font-size: 30px;
          color: #e6a23c;
        }
      }
    }
  }
}
.butt {
  width: 100%;
  background: #fff;
  display: flex;
}
#main {
  width: 90%;
  height: 260px;
  background: #fff;
}
.el-button{
  height: 40px;
  margin: 10px 0;
}
</style>
